<template>
    <div class="apply-lecturer">
        <div class="left">
            <el-card>
                <h2 class="deepen-col">欢迎加入坤课讲师团，世界因你而精彩</h2>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="我的姓名">
                        <el-col :span="10">
                            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-col :span="10">
                            <el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="我的邮箱">
                        <el-col :span="10">
                            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="我的简历">
                        <el-input type="textarea" v-model="form.resume" :rows="10"
                            placeholder="输入简介，简介尽可能体现您的主攻技术方向,从业经历,公开分享的经验等"></el-input>
                    </el-form-item>
                    <el-form-item label="讲解视频">
                        <el-col :span="10">
                            <el-input v-model="form.video" placeholder="粘贴视频播放页地址"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div class="sub-btn">
                    <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
                </div>
            </el-card>
        </div>
        <div class="right">
            <el-card class="why">
                <div>
                    <el-image :src="require('./images/hire_img.jpg')" style=""></el-image>
                </div>
                <div>
                    <p class="hire-reason">如果你对本课程领域擅长、能按照自己或者本求课的描述分享你的知识给互联网用户，就来应聘吧</p>
                    <p class="hire-reason">你的课程会在坤课网及我们的合作渠道中展示和推广，你就是未来的行业大牛</p>
                    <p class="hire-reason">坤课网还会为你支付课程公益津贴，让你得到既实际又实惠的回报</p>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { reqApplySave } from "@/api/apply"
export default {
    name: 'lecturer',
    data() {
        return {
            form: {},
            loading: false
        }
    },
    methods: {
        submit() {
            let data = {
                type: 1,
                otherInfo: this.form
            }
            this.loading = true;
            reqApplySave(data).then((res) => {
                this.$message.success(res.message)
                this.loading = false;
            }).catch((error) => {
                this.loading = false;
                this.$message.error(error.message);
            })
        }
    },
}
</script>

<style scoped>
.apply-lecturer {
    display: flex;
}

.right {
    width: 260px;
}

.left {
    flex: 1;
    margin-right: 20px;
}

.why p {
    color: #969b9e;
    font-size: 13px;
    line-height: 24px;
    padding: 5px;
}

.deepen-col {
    margin-bottom: 20px;
    font-family: "HarmonyOS_Sans_Regular";
    font-weight: 500;
    font-size: 20px;
}

.sub-btn {
    text-align: center;
}
</style>